<template>
  <view class="grid-icon">
    <view class="container">
      <view
        class="item"
        v-for="(item, index) in list.slice(0, column * row)"
        :key="item.name"
        @click="handleClick(item, index)"
        :style="{ width: itemWidth }"
      >
        <view class="icon">
          <img :src="item.icon" />
        </view>
        <view class="name">{{ item.name }}</view>
        <view class="brief" v-if="item.brief">{{ item.brief }}</view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    name: "GridIcon",
    props: {
      // 数据
      list: Array,
      // 每行显示几个元素
      column: {
        type: Number,
        default: 5,
      },
      // 显示几行
      row: {
        tppe: Number,
        default: 3,
      },
    },
    computed: {
      itemWidth() {
        let { list, column } = this
        let listLen = list.length
        
        if(listLen < column) {
          return 100 / listLen + `%`;
        }else {
          return 100 / column + `%`;
        }
      },
    },
    data() {
      return {};
    },
    methods: {
      handleClick(item, index) {
        this.$emit("click", { item, index });
      },
    },
  };
</script>

<style lang="scss" scoped>
  @import './index.scss';
</style>
